<template>
  <div v-loading="loading" class="PlayerManagementl">
    <h4>播报机管理</h4>
    <div class="key-search">
      <el-form ref="form" :rules="rules" :model="BindForm" label-width="80px" label-position="left">
        <el-form-item prop="number" label="编号:">
          <el-col :span="24">
            <el-input v-model="BindForm.number" placeholder="请输入播报机编号" maxlength="20" class="cus-input" clearable />
          </el-col>
        </el-form-item>
        <el-form-item prop="allCity" label="地区:">
          <el-col :span="24" style="align-items: center;display: flex;">
            <el-checkbox v-model="BindForm.allCity" label="全部" border @change="changedAllCity" />
            <city-select ref="citySelect" v-model="BindForm.address" @change="changedAddress" />
          </el-col>
        </el-form-item>
        <el-form-item prop="store" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.store" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item prop="time" label="绑定时间:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button plain style="margin-left:10px" @click="setWeek">近一周</el-button>
            <el-button plain @click="setMonth">近一月</el-button>
            <el-button plain @click="setYear">近一年</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">筛选</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="key-type">
      <el-radio-group v-model="BindForm.state" @change="reloadTableData">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="online">在线</el-radio-button>
        <el-radio-button label="offline">离线</el-radio-button>
      </el-radio-group>
      <el-button
        type="primary"
        @click="$router.push({ name: 'AddBroadcastMachine' })"
      >新增播报机</el-button>
    </div>
    <div class="ele-table">
      <el-table :data="BindTable" border max-height="600" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的播报机' : '暂无播报机')">
        <!--        <el-table-column-->
        <!--          label="序号"-->
        <!--          type="index"-->
        <!--          align="center"-->
        <!--          width="80"-->
        <!--          :resizable="false"-->
        <!--          fixed="left"-->
        <!--        />-->
        <el-table-column
          label="播报机编号"
          prop="annoNum"
          align="center"
          width="180"
          :resizable="false"
          fixed="left"
        />
        <el-table-column
          label="版本号"
          prop="edition"
          align="center"
          width="160"
          :resizable="false"
        />
        <el-table-column
          label="门店"
          prop="storeName"
          align="center"
          width="200"
          :resizable="false"
        />
        <el-table-column
          label="地址"
          prop="storeAddress"
          align="center"
          min-width="300"
          :resizable="false"
        />
        <el-table-column
          label="状态"
          prop="state"
          align="center"
          width="70"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 'offline'" type="info" size="small">离线</el-tag>
            <el-tag v-else-if="scope.row.state == 'online'" effect="dark" type="success" size="small">在线</el-tag>
            <el-tag v-else type="info" size="small">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="绑定时间"
          prop="bindingTime"
          align="center"
          width="160"
          :resizable="false"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          fixed="right"
          width="130"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="$router.push({name:'EditBroadcastMachine', query: { p: $ed(scope.row) } })">编辑</el-button>
            <el-button type="text" @click="$router.push({name:'PlayerDetail', query: { p: $ed(scope.row) }})">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div />
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
import CitySelect from '../../components/CitySelect/index'
import StoreSelect from '../../components/StoreSelect/index'
import { playerList } from '@/api/shop'

/** 播报机管理 */
export default {
  name: 'PlayerManagementl',
  components: { StoreSelect, CitySelect },
  data() {
    var validateNumber = (rule, value, callback) => {
      var Regx = /^[A-Za-z0-9]*$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的播报机编号'))
      } else {
        callback()
      }
    }

    return {
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      BindForm: {
        number: null,
        allCity: true,
        store: null,
        time: null,
        state: 'all',
        address: {
          province: null,
          city: null,
          village: null
        }
      },
      rules: {
        number: [{ validator: validateNumber, trigger: 'change' }]
      },
      BindTable: []
    }
  },
  created() {
    const vm = this
    vm.loadTableData()
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.citySelect.resetFields()
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    changedAllCity() {
      const vm = this
      if (vm.BindForm.allCity) {
        if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
          vm.$refs.citySelect.resetFields()
        }
      } else {
        if (!vm.BindForm.address.province || !vm.BindForm.address.city || !vm.BindForm.address.village) {
          vm.BindForm.allCity = true
        }
      }
    },
    changedAddress() {
      const vm = this
      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        vm.BindForm.allCity = false
      } else {
        vm.BindForm.allCity = true
      }

      const provinceId = vm.BindForm.address.province ? vm.BindForm.address.province.code : null
      const cityId = vm.BindForm.address.city ? vm.BindForm.address.city.code : null
      const villageId = vm.BindForm.address.village ? vm.BindForm.address.village.code : null

      vm.$refs.storeSelect.refresh(provinceId, cityId, villageId)
    },
    search() {
      const vm = this

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setYear() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 364)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        shopId: parseInt(localStorage.getItem('shopId')),
        type: 0,
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.number && vm.BindForm.number.length > 0) {
        data['number'] = vm.BindForm.number
        vm.isSearch = true
      }

      if (vm.BindForm.store && vm.BindForm.store > 0) {
        data['storeId'] = vm.BindForm.store
        vm.isSearch = true
      }
      if (vm.BindForm.state !== 'all') {
        data['state'] = vm.BindForm.state
        vm.isSearch = true
      }
      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        data['address'] = {}
        if (vm.BindForm.address.province) {
          data['address']['province'] = vm.BindForm.address.province.code
        }
        if (vm.BindForm.address.city) {
          data['address']['city'] = vm.BindForm.address.city.code
        }
        if (vm.BindForm.address.village) {
          data['address']['area'] = vm.BindForm.address.village.code
        }
        vm.isSearch = true
      }
      if (vm.BindForm.time && vm.BindForm.time.length === 2) {
        data['time'] = {
          startTime: vm.BindForm.time[0],
          endTime: vm.BindForm.time[1]
        }
        vm.isSearch = true
      }

      vm.loading = true
      playerList(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        vm.BindTable = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.PlayerManagementl {
  padding: 30px;
  .key-search {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eeeeee;

    .cus-input {
      max-width: 400px;
    }
  }
  .key-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .ele-table,
  .pagination {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
